<template>
	<div ref="chartDom" style="width: 100%; height:100%"></div>
</template>
<script setup>
	/**
	 * @description Web端图表
	 */
	import {
		ref,
		onMounted,
		onUnmounted,
		defineProps,
		defineExpose,
		nextTick,
	} from 'vue'
	import * as echarts from 'echarts'

	const chartDom = ref(null)
	let myChart = null
	let resizeObserver = null

	const props = defineProps({
		chartdate: {
			type: Object,
			required: true
		},
		headtitle: {
			type: Array,
		},
	})

	// 基础图表配置
	let option = {
		title: {
			text: '' // 图表标题文本
		},
		tooltip: {
			trigger: 'axis' // 提示框触发类型，坐标轴触发
		},
		toolbox: {
			show: true, // 显示工具箱
			feature: {
				dataZoom: {
					yAxisIndex: "none" // 数据区域缩放，不限制y轴
				},
				saveAsImage: {} // 保存为图片功能
				//其他功能性按钮查看官网进行增加，包括（显示数据，下载图片，改为柱状图等）
			}
		},
		color: ["#1C1C1C", "#A1C6D9", "#C2C9F6", "#73C0DE", "#96E2CC", "#FFE7A0", "#B4ECC0"], // 调色盘颜色列表
		legend: {}, // 图例组件
		grid: {
			left: '5%',    // grid组件离容器左侧的距离
			right: '4%',   // grid组件离容器右侧的距离
			bottom: '3%',  // grid组件离容器下侧的距离
			containLabel: true // grid包含坐标轴的刻度标签
		},
		xAxis: {
			axisTick: {
				show: false // 不显示坐标轴刻度线
			},
			data: ['', ''] // x轴类目数据
		},
		yAxis: {
			type: 'value', // y轴类型为数值轴
		},
		series: [] // 系列列表，每个系列通过type决定图表类型
	};

	// 折线图配置
	let lineoption = {
		title: {
			left: "center",   // 标题水平居中
			top: "8%",        // 标题距离容器顶部8%
			textStyle: {
				color: '#111111',     // 标题颜色
				fontWeight: 'bold',   // 标题加粗
				fontSize: 16,         // 标题字体大小
			},
		},
		tooltip: {
			trigger: 'axis',                    // 坐标轴触发提示框
			backgroundColor: 'rgba(33,56,77,1)', // 提示框背景色
			borderColor: 'rgba(33,56,77,1)',     // 提示框边框颜色
			textStyle: {
				color: '#fff',     // 提示框文字颜色
				fontSize: 14       // 提示框文字大小
			},
			axisPointer: {
				lineStyle: {
					color: 'rgba(155, 162, 165, 1.0)', // 坐标轴指示器线的颜色
					type: 'dashed',                    // 虚线类型
					width: 2                           // 线条宽度
				}
			}
		},
		// legend: {
		// 	right: 'center',
		// 	top: '5%',
		// 	itemWidth: 16,
		// 	itemHeight: 16,
		// 	itemGap: 25,
		// 	icon: 'stack',
		// 	textStyle: {
		// 		color: '#E1E5E6'
		// 	}
		// },
		grid: {
			top: '16%',    // grid距离容器顶部16%
			right: '4%',   // grid距离容器右侧4%
			bottom: '4%',  // grid距离容器底部4%
			left: '6%',    // grid距离容器左侧6%
			containLabel: true // 包含坐标轴标签
		},
		xAxis: {
			data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00',
				'22:00'
			],              // x轴数据
			type: 'category',   // 类目轴
			boundaryGap: true,  // 坐标轴两边留白策略
			axisLabel: {
				textStyle: {
					color: '#B5C5D4', // 坐标轴标签文字颜色
					fontSize: 12      // 坐标轴标签文字大小
				}
			},
			axisLine: {
				show: false // 不显示坐标轴线
			},
			axisTick: {
				show: false // 去除刻度线
			}
		},
		yAxis: {
			type: 'value',      // 数值轴
			"splitNumber": 2,   // 分割段数
			axisTick: {
				show: false // 不显示坐标轴刻度
			},
			axisLine: {
				show: false // 不显示坐标轴线
			},
			axisLabel: {
				textStyle: {
					color: '#B5C5D4', // y轴标签文字颜色
					fontSize: 12      // y轴标签文字大小
				}
			},
			// y轴分割线的颜色
			splitLine: {
				lineStyle: {
					color: '#9EA6B4', // 分割线颜色
					type: 'solid'     // 实线
				}
			}
		},
		series: [{
				name: '总流量',     // 系列名称
				smooth: true,       // 平滑曲线
				type: 'line',       // 图表类型为折线图
				// 填充颜色设置
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						false
					),
					shadowColor: 'rgba(0, 0, 0, 0.1)' // 阴影颜色
				},
				// 开始不显示拐点， 鼠标经过显示
				showSymbol: false,  // 不显示拐点
				symbolSize: 8,      // 拐点大小
				// 设置拐点颜色以及边框
				itemStyle: {
					color: '#1C1C1C' // 拐点颜色
				},
				data: [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73] // 数据
			},
			{
				name: '进园',       // 系列名称
				smooth: true,       // 平滑曲线
				type: 'line',       // 图表类型为折线图
				// 填充颜色设置
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[{
								offset: 0,
								color: 'rgba(26, 119, 221,.3)' // 渐变色的起始颜色
							},
							{
								offset: 0.9,
								color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
							}
						],
						false
					),
					shadowColor: 'rgba(0, 0, 0, 0.1)' // 阴影颜色
				},
				// 开始不显示拐点， 鼠标经过显示
				showSymbol: false,  // 不显示拐点
				symbolSize: 4,      // 拐点大小
				// 设置拐点颜色以及边框
				itemStyle: {
					color: '#A1C6D9' // 拐点颜色
				},
				data: [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53] // 数据
			}
		]
	};

	// 横向条形图配置
	let horizontalbaroption = {
		title: {
			text: 'World Population', // 图表标题
			textStyle: {
				fontSize: 14 // 标题字体大小
			},
			left: 'center' // 标题居中
		},
		tooltip: {
			trigger: 'axis', // 坐标轴触发
			axisPointer: {
				type: 'shadow', // 阴影指示器
				shadowStyle: {
					color: 'rgb(0,0,0,0)' // 阴影颜色透明
				}
			}
		},
		color: ['#e2e3e4'], // 调色盘颜色
		xAxis: {
			type: 'value', // 数值轴
			show: false,   // 不显示x轴
		},
		yAxis: {
			type: 'category', // 类目轴
			splitLine: {
				show: false, // 不显示分割线
			},
			axisLine: {
				show: false, // 不显示坐标轴线
			},
			axisTick: {
				show: false, // 不显示刻度线
			},
			data: [] // y轴数据（空数组待填充）
		},
		grid: {
			left: '5%',     // grid距离容器左侧5%
			right: '5%',    // grid距离容器右侧5%
			bottom: '0%',   // grid距离容器底部0%
			top: '10%',     // grid距离容器顶部10%
			containLabel: true // 包含坐标轴标签
		},
		series: [{
			name: '2011',    // 系列名称
			type: 'bar',     // 图表类型为柱状图
			barWidth: 10,    // 柱条宽度
			data: [],        // 数据（空数组待填充）
			emphasis: {
				itemStyle: {
					color: '#000' // 高亮时的颜色
				}
			}
		}]
	};

	// 柱状图配置
	let baroption = {
		color: ["#1C1C1C", "#A1C6D9", "#C2C9F6", "#73C0DE", "#96E2CC", "#FFE7A0", "#B4ECC0"], // 调色盘颜色
		legend: {}, // 图例组件
		grid: {
			left: '5%',    // grid距离容器左侧5%
			right: '4%',   // grid距离容器右侧4%
			bottom: '3%',  // grid距离容器底部3%
			containLabel: true // 包含坐标轴标签
		},
		xAxis: {
			type: 'category', // 类目轴
			data: ['', '']    // x轴数据
		},
		yAxis: {
			type: 'value' // 数值轴
		},
		series: [] // 系列列表（空数组待填充）
	};

	// 饼图配置
	let pieoption = {
		title: {
			text: 'World Population', // 图表标题
			textStyle: {
				fontSize: 14 // 标题字体大小
			},
			left: '10', // 标题距离左侧10px
			top:'10'    // 标题距离顶部10px
		},
		color: ["#1C1C1C", "#A1C6D9", "#C2C9F6", "#73C0DE", "#96E2CC", "#FFE7A0", "#B4ECC0"], // 调色盘颜色
		tooltip: {
			trigger: 'item',   // 数据项图形触发
			position:'right'   // 提示框位置在右侧
		},
		legend: {
			top: 'center',  // 图例垂直居中
			right: '5%',    // 图例距离右侧5%
			width: '100'    // 图例宽度
		},
		series: [{
			name: 'Access From',          // 系列名称
			type: 'pie',                  // 图表类型为饼图
			radius: ['30%', '50%'],       // 环形饼图内外半径
			center:['30%', '50%'],        // 饼图中心点位置
			avoidLabelOverlap: false,     // 是否启用标签重叠策略
			padAngle: 3,                  // 扇形之间的间隔角度
			itemStyle: {
				borderRadius: 1 // 扇形圆角
			},
			label: {
				show: false,      // 不显示标签
				position: 'center' // 标签位置在中心
			},
			emphasis: {
				label: {
					show: false,    // 高亮时不显示标签
					fontSize: 40,   // 字体大小
					fontWeight: 'bold' // 字体加粗
				}
			},
			labelLine: {
				show: false // 不显示标签连接线
			} 
		}]
	};

	// 初始化图表
	const initChart = () => {
		if (myChart) {
			myChart.dispose();
		}
		myChart = echarts.init(chartDom.value)
		//使用配置
		myChart.setOption(option)
	}

	/**
	 * 控制折线图（默认），需要配置props
	 */
	const updatecharts = (headtitle) => {
		option.series = [];
		option.xAxis.data = props.chartdate[11]
		for (let i = 0; i < headtitle.length; i++) {
			option.series.push({
				name: headtitle[i].f_name,
				type: 'line',
				smooth: true,
				data: props.chartdate[i]
			})
		}
		myChart.setOption(option)
	}

	/**
	 * 控制Home页面横向条形图
	 */
	const updatahorizontalbarcharts = (data,Ydata,title) => {
		if (myChart) {
			myChart.dispose();
		}
		myChart = echarts.init(chartDom.value);
		horizontalbaroption.series[0].data=data;
		horizontalbaroption.yAxis.data=Ydata;
		horizontalbaroption.title.text=title;
		myChart.setOption(horizontalbaroption)
	}

	/**
	 * 控制Home页面的折线图
	 * @param {Array} data:示例数据[[12,23,54],[23,35,56]]
	 * @param Xdata:X轴数据
	 */
	const updatalinecharts = (data,Xdata) => {
		if (myChart) {
			myChart.dispose();
		}
		myChart = echarts.init(chartDom.value);
		for (let i = 0; i < data.length; i++) {
			lineoption.series[i].data=data[i];
		}
		lineoption.xAxis.data=Xdata;
		myChart.setOption(lineoption)
	}
	
	/**
	 * 控制柱状图，需要配置props
	 * @param headtitle:不同数据的名称
	 */
	const updatabarcharts = (headtitle) => {
		baroption.series = [];
		baroption.xAxis.data = props.chartdate[11]
		for (let i = 0; i < headtitle.length; i++) {
			baroption.series.push({
				name: headtitle[i].f_name,
				type: 'bar',
				data: props.chartdate[i]
			})
		}
		myChart.setOption(baroption)
	}

	/**
	 * 控制饼图
	 * @param data :实例数据 [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },......]
	 * @param title:标题
	 */
	const updatapiecharts = (data,title) => {
		if (myChart) {
			myChart.dispose();
		}
		myChart = echarts.init(chartDom.value);
		pieoption.series[0].data = data;
		pieoption.title.text=title;
		myChart.setOption(pieoption)
	}
	
	const updatacompeletecharts = (xdata, headtitle, data) => {
		if (myChart) {
			myChart.dispose();
		}
		myChart = echarts.init(chartDom.value);
		option.series = [];
		option.xAxis.data = xdata;
		for (let i = 0; i < headtitle.length; i++) {
			option.series.push({
				name: headtitle[i].f_name,
				type: 'line',
				smooth: true,
				data: data[i]
			})
		}
		console.log(option.series);
		myChart.setOption(option)
	}

	// 处理窗口大小变化
	const handleResize = () => {
		if (myChart) {
			nextTick(() => {
				myChart.resize();
			});
		}
	};

	// 生命周期钩子
	onMounted(() => {
				initChart();
				if (myChart) {
					// 初始化后立即调整大小
					myChart.resize();
					if (window.ResizeObserver) {
						resizeObserver = new ResizeObserver(() => {
							if (myChart) {
								myChart.resize({
									animation: {
										duration: 200
									}
								});
							}
						});
						resizeObserver.observe(chartDom.value);
					} 
					
					window.addEventListener('resize', handleResize);
				
				}
	});
	
	onUnmounted(() => {
		if (myChart) {
			myChart.dispose();
		}
		if (resizeObserver && chartDom.value) {
			resizeObserver.unobserve(chartDom.value);
			resizeObserver = null;
		}
		
		
		window.removeEventListener('resize', handleResize);
	});
	
	// 暴露方法给父组件
	defineExpose({
		updatecharts,
		updatabarcharts,
		updatapiecharts,
		updatalinecharts,
		updatahorizontalbarcharts,
		updatacompeletecharts,
		handleResize  // 暴露resize处理方法
	});
</script>